<template>
  <div>
    <baidu-map class="bm-view" ak="auGG3c9kqrFZLKNoHq0gr3BnthBywmjF" :center="center" :zoom="zoom" @ready="handler">
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
      <bm-marker v-for="(item,index) in list" :key="index" :position="{lng: item.lng, lat: item.lat}"></bm-marker>
    </baidu-map>

  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'  // 地图
  import BmMarker from 'vue-baidu-map/components/overlays/Marker' // 标注
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'  // 缩放控件

  export default {
    name: 'BaiDuMap',
    data () {
      return {
        center: {lng: 0, lat: 0},
        zoom: 3,
        Ullist: [{
          id: '0001',
          text: '新房'
        }, {
          id: '0002',
          text: '二手房'
        }, {
          id: '0003',
          text: '线路'
        }, {
          id: '0004',
          text: '地铁'
        }, {
          id: '0005',
          text: '公交'
        }, {
          id: '0006',
          text: '教育'
        }, {
          id: '0007',
          text: '银行'
        }, {
          id: '0008',
          text: '医院',
        }, {
          id: '0009',
          text: '购物'
        }, {
          id: '0010',
          text: '美食'
        }],
        // 标注点---经纬度数组
        list: [
          {lng: 112.945183, lat: 28.234254, txt: '第1个'},
          {lng: 112.95165, lat: 28.233872, txt: '第2个'},
          {lng: 112.947338, lat: 28.230689, txt: '第3个'},
          {lng: 112.942595, lat: 28.243164, txt: '第4个'},
          {lng: 112.948919, lat: 28.242082, txt: '第5个'},
          {lng: 112.935696, lat: 28.242909, txt: '第6个'}
        ]
      }
    },
    // 注册组件
    components: {
      BaiduMap,
      BmMarker,
      BmNavigation
    },
    // 方法
    methods: {
      // 当前城市 定位
      handler ({BMap, map}) {
        console.log(BMap, map)
        this.center.lng = 112.94547
        this.center.lat = 28.234826
        this.zoom = 13
      },
    }
  }

</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    TopBorder()

  .title
    display flex
    justify-content space-between
    line-height 1.3rem

  .title h1
    font-size .35rem
    font-weight bolder

  .list
    display flex
    align-items center
    height 1.3rem
    line-height 1.3rem
    overflow-x auto


  .list .item
    display inline-block
    position relative
    min-width 1.386667rem
    text-align center
    border-radius .106667rem

  .bm-view
    width 100%
    height 300px


</style>
